import * as Cesium from 'cesium';

class EditRoute {
  constructor(viewer, height) {
    this.viewer = viewer;
    this.RoutePrimitive = null;
    this.addToScene();
  }
  // 绘制轨迹网格
  drawBox () {

  }
  // 绘制空间网格
  drawGrid () {
  }
  // 绘制航线
  drawRoute () {

  }
  // 绘制点
  drawPoint () {

  }
  // 统一图元添加到场景
  addToScene () {
    const positions = [];
    const size = 1.0; // 矩形的大小
    // 创建矩形的4个顶点
    // positions.push(new Cesium.Cartesian2(-size / 2, -size / 2)); // 左下
    // positions.push(new Cesium.Cartesian2(size / 2, -size / 2));  // 右下
    // positions.push(new Cesium.Cartesian2(size / 2, size / 2));   // 右上
    // positions.push(new Cesium.Cartesian2(-size / 2, size / 2));  // 左上
    positions.push({ x: 0.0, y: 0.0, z: 0.00 });
    positions.push({ x: 1.0, y: 0.0, z: 0.00 });
    positions.push({ x: 1.0, y: 1.0, z: 0.00 });
    positions.push({ x: 0.0, y: 1.0, z: 0.00 });
    console.log("positions->", positions);
    console.log('new Cesium.Cartesian3(10, 0, 0)->', new Cesium.Cartesian3(10, 0, 0));
    console.log('Cesium.Cartesian3.fromDegrees(110.001, 40.00, 10)->', Cesium.Cartesian3.fromDegrees(110.001, 40.00, 10));

    // 确保 polylinePositions 是正确的 Cartesian3 数组
    const polylinePositions = Cesium.Cartesian3.fromDegreesArrayHeights([110.00, 40.00, 10.00, 110.001, 40.00, 10.00])
    // 添加一个点实体
    this.viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(110.00, 40.00, 10), // 点的经纬度位置，以及高度
      point: {
        pixelSize: 10, // 点的大小，以像素为单位
        color: Cesium.Color.RED // 点的颜色
      }
    });
    // 添加一个点实体
    this.viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(110.001, 40.00, 10), // 点的经纬度位置，以及高度
      point: {
        pixelSize: 10, // 点的大小，以像素为单位
        color: Cesium.Color.RED // 点的颜色
      }
    });
    // 添加一个点实体
    this.viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(110.002, 40.00, 10), // 点的经纬度位置，以及高度
      point: {
        pixelSize: 10, // 点的大小，以像素为单位
        color: Cesium.Color.RED // 点的颜色
      }
    });


    console.log(`经度：${Cesium.Math.toRadians(0.01)}`, `纬度：${Cesium.Math.toRadians(0.01)}`);
    console.log("polylinePositions: ", polylinePositions);

    const pVGeometry = new Cesium.PolylineVolumeGeometry({
      vertexFormat: Cesium.VertexFormat.POSITION_AND_NORMAL,  // 需要包含 POSITION 和 NORMAL
      polylinePositions: polylinePositions, // 使用正确的坐标
      shapePositions: positions
    })
    // 创建 Geometry 实例
    const geometryInstance = new Cesium.GeometryInstance({
      geometry: pVGeometry,
      modelMatrix: Cesium.Matrix4.fromTranslation(new Cesium.Cartesian3(0, 0, 0))
    });
    console.log("geometryInstance: ", geometryInstance);
    // 创建 Appearance
    const appearance = new Cesium.MaterialAppearance({
      material: Cesium.Material.fromType('Color', {
        color: Cesium.Color.GRAY.withAlpha(0.5)
      })
    });
    // 创建 Primitive 实例
    const routePrimitive = new Cesium.Primitive({
      geometryInstances: geometryInstance,
      appearance: appearance,
      asynchronous: false // 不使用异步加载，确保立即渲染
    });
    console.log('pVGeometry->', pVGeometry);

    // 遍历shapePositions并转换
    // 添加一个点实体
    this.viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(110.00, 40.0000 + 0.0000057453292519943296, 10), // 点的经纬度位置，以及高度
      point: {
        pixelSize: 10, // 点的大小，以像素为单位
        color: Cesium.Color.BLUE // 点的颜色
      }
    });
    // 添加 Primitive 到场景
    // this.viewer.scene.primitives.add(routePrimitive);
    // 弧度转纬度
    const latitude = Cesium.Math.toDegrees(1);
    console.log('弧度转纬度：' + latitude);
    // 创建PolylineGeometry实例
    var polylineGeometry = new Cesium.PolylineGeometry({
      positions: Cesium.Cartesian3.fromDegreesArrayHeights([110.00, 40.00, 10.00, 110.001, 40.00, 10.00, 110.002, 40.00, 10.00]),
      width: 1 // 设置线宽
    });
    // 创建几何图形的实例
    var geometryInstanceLine = new Cesium.GeometryInstance({
      geometry: polylineGeometry,
      attributes: {
        color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.BLACK) // 设置线的颜色为红色
      }
    });
    var polylineGeometry2 = new Cesium.PolylineGeometry({
      positions: Cesium.Cartesian3.fromDegreesArrayHeights([110.00, 40.00001, 10.00, 110.001, 40.00001, 10.00, 110.002, 40.00001, 10.00]),
      width: 1 // 设置线宽
    });
    // 创建几何图形的实例
    var geometryInstanceLine2 = new Cesium.GeometryInstance({
      geometry: polylineGeometry2,
      attributes: {
        color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.WHEAT) // 设置线的颜色为红色
      }
    });
    // 创建Primitive并添加到场景中
    var routeLinePrimitive = new Cesium.Primitive({
      geometryInstances: [geometryInstanceLine, geometryInstanceLine2],
      appearance: new Cesium.PolylineColorAppearance({
        translucent: false,
        width: 1
      })
    });
    // this.viewer.scene.primitives.add(routeLinePrimitive);
    // 调试信息：查看是否成功加载
    console.log("Added RoutePrimitive: ", routePrimitive);


    const vertexShaderSource = `
  attribute vec3 position;
  uniform float width; // 可能用于 PolylineVolumeGeometry
  varying vec4 vColor;

  void main() {
    // 处理 PolylineVolumeGeometry 的计算
    if (width > 0.0) {
      // 计算带宽度的几何体位置（例如计算法线）
      vec3 offset = calculateOffset(position, width);
      gl_Position = projection * modelView * vec4(position + offset, 1.0);
    } else {
      // 处理普通的 PolylineGeometry
      gl_Position = projection * modelView * vec4(position, 1.0);
    }
    
    vColor = vec4(1.0, 0.0, 0.0, 1.0); // 示例颜色
  }
`;

    const fragmentShaderSource = `
  varying vec4 vColor;

  void main() {
    gl_FragColor = vColor;
  }
`;
    const geometryInstance22 = new Cesium.GeometryInstance({
      geometry: polylineGeometry2,//pVGeometry, // 或 polylineGeometry
      attributes: {
        color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED)
      }
    });
    const primitive123 = new Cesium.Primitive({
      geometryInstances: [geometryInstance22],
      appearance: new Cesium.PerInstanceColorAppearance({
        closed: true
      }),
      vertexShaderSource: vertexShaderSource,
      fragmentShaderSource: fragmentShaderSource
    });
    this.viewer.scene.primitives.add(primitive123);
  }
}

export default EditRoute;
